import React from 'react'
import PropTypes from 'prop-types'
import { Tag, Card, Icon, Popover } from 'antd'
import { Trans, withI18n } from '@lingui/react'

const { Meta } = Card;

const ProjectLink = ({
  data
}) => {
  const { ProjectName, count } = data;
  const content = (
    <Card
      style={{ marginLeft: "-20px", marginTop: "-12px", marginRight: "-20px", marginBottom: "-12px" }}
      // cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
      actions={[<Icon type="folder-open" />, <Icon type="link" />]}
    >
      <Meta
        title={ProjectName}
        description={<Trans>{`The project includes ${count} equipment`}</Trans>}
      />
    </Card>
  );
  return (
    <Popover placement="bottomRight" content={content} arrowPointAtCenter>
      {/* <Button type="primary">Hover me</Button> */}
      <Tag color={"geekblue"}>{<Icon type="folder" />} &nbsp;{ProjectName}</Tag>
    </Popover>
  )
}

ProjectLink.propTypes = {
  data: PropTypes.object,
}

export default ProjectLink
